<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import type { DateValue } from '@internationalized/date'

interface Props {
  modelValue?: DateValue
  locale?: string
  class?: string
  initialFocus?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  locale: 'zh-CN',
  initialFocus: false
})

const emits = defineEmits<{
  'update:modelValue': [value: DateValue | undefined]
}>()

const currentDate = ref(new Date())
const selectedDate = ref<DateValue | undefined>(props.modelValue)

watch(() => props.modelValue, (val) => {
  selectedDate.value = val
})

const currentMonth = computed(() => currentDate.value.getMonth())
const currentYear = computed(() => currentDate.value.getFullYear())

const monthName = computed(() => {
  return currentDate.value.toLocaleDateString(props.locale, { year: 'numeric', month: 'long' })
})

const weekDays = ['一', '二', '三', '四', '五', '六', '日']

const daysInMonth = computed(() => {
  const year = currentYear.value
  const month = currentMonth.value
  const firstDay = new Date(year, month, 1)
  const lastDay = new Date(year, month + 1, 0)
  const daysCount = lastDay.getDate()
  const startWeekDay = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1

  const days: Array<{ date: number; month: number; year: number; isCurrentMonth: boolean; isToday: boolean; isSelected: boolean }> = []

  // Previous month days
  const prevMonthLastDay = new Date(year, month, 0).getDate()
  for (let i = startWeekDay - 1; i >= 0; i--) {
    days.push({
      date: prevMonthLastDay - i,
      month: month - 1,
      year: month === 0 ? year - 1 : year,
      isCurrentMonth: false,
      isToday: false,
      isSelected: false
    })
  }

  // Current month days
  const today = new Date()
  for (let i = 1; i <= daysCount; i++) {
    const isToday = today.getDate() === i && today.getMonth() === month && today.getFullYear() === year
    const isSelected = selectedDate.value ? selectedDate.value.day === i && selectedDate.value.month === month + 1 && selectedDate.value.year === year : false
    days.push({
      date: i,
      month,
      year,
      isCurrentMonth: true,
      isToday,
      isSelected
    })
  }

  // Next month days
  const remainingDays = 42 - days.length
  for (let i = 1; i <= remainingDays; i++) {
    days.push({
      date: i,
      month: month + 1,
      year: month === 11 ? year + 1 : year,
      isCurrentMonth: false,
      isToday: false,
      isSelected: false
    })
  }

  return days
})

function prevMonth() {
  currentDate.value = new Date(currentYear.value, currentMonth.value - 1, 1)
}

function nextMonth() {
  currentDate.value = new Date(currentYear.value, currentMonth.value + 1, 1)
}

function selectDate(day: { date: number; month: number; year: number; isCurrentMonth: boolean }) {
  const dateValue: DateValue = {
    year: day.year,
    month: day.month + 1,
    day: day.date
  }
  selectedDate.value = dateValue
  emits('update:modelValue', dateValue)
  
  if (!day.isCurrentMonth) {
    currentDate.value = new Date(day.year, day.month, 1)
  }
}
</script>

<template>
  <div :class="cn('macos-calendar p-5', props.class)">
    <!-- 月份导航 -->
    <div class="relative flex w-full items-center justify-between mb-4">
      <button
        type="button"
        @click="prevMonth"
        class="macos-calendar-nav-btn"
      >
        <ChevronLeft class="h-4 w-4" />
      </button>
      <div class="macos-calendar-header">{{ monthName }}</div>
      <button
        type="button"
        @click="nextMonth"
        class="macos-calendar-nav-btn"
      >
        <ChevronRight class="h-4 w-4" />
      </button>
    </div>
    
    <!-- 日历内容 -->
    <div>
      <div class="w-full space-y-2">
        <!-- 星期标题 -->
        <div class="flex w-full justify-between mb-2">
          <div 
            v-for="day in weekDays" 
            :key="day" 
            class="w-9 text-center text-[11px] font-semibold tracking-wide"
            style="color: #86868B;"
          >
            {{ day }}
          </div>
        </div>
        
        <!-- 日期网格 -->
        <div class="grid grid-cols-7 gap-1.5">
          <button
            v-for="(day, index) in daysInMonth"
            :key="index"
            type="button"
            @click="selectDate(day)"
            :class="cn(
              'macos-calendar-day text-[13px] h-9 w-9 p-0',
              day.isSelected && 'macos-calendar-day-selected',
              day.isToday && !day.isSelected && 'macos-calendar-day-today',
              !day.isCurrentMonth && 'opacity-30'
            )"
          >
            {{ day.date }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

